import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import './style.scss';
import { actionCreators } from './store';

class ScoreParticulars extends PureComponent {
    render() {
        const { scoreCellData, scoreCellImg, enshrineScoreToLibrary, removalScoreFromLibrary, downloadScoreFromLibrary } = this.props;
        return (
            <div className="scoreParticulars">
                <div className="scoreOperate">
                {
                    (()=> {
                        if (!scoreCellData.FAVORITE_ID) {
                            return (
                                <div className="scoreCollect" onClick = { 
                                    () => enshrineScoreToLibrary(scoreCellData.ID)
                                 }>
                                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/not_like@2x.png" alt="" />
                                </div>
                            )
                        } else {
                            return (
                                <div className="scoreCollect" onClick = { 
                                    () => removalScoreFromLibrary(scoreCellData.ID)
                                 }>
                                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/like@2x.png" alt="" />
                                </div>
                            )
                        }
                    })()
                }
                <div className="scoreDownload" onClick = {
                    () => downloadScoreFromLibrary(scoreCellImg, scoreCellData.NAME)
                }>
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/download@2x.png" alt="" />
                </div>
                </div>
                <div className="scoreImage">
                    {/* {scoreCellData['IMG'][0]} */}
                    {
                        scoreCellImg.map((item, index) => {
                            return (
                                <div className="imageCell" key={'scoreCellImg'+index}>
                                    <img src={item} alt="" /> 
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }

    componentDidMount() {
        // 获取 隐藏的路由 参数
        const { score_id } = this.props.history.location.state;
        // 累加 曲谱浏览量
        this.props.accumulateHotOfScore(score_id);
        // 获取 曲谱详情 数据
        this.props.acquireScoreParticularsData(score_id);
	}

    componentWillUnmount() {
        console.log('Unmounting 销毁')
        // const iframeList = document.getElementsByTagName('iframe');
        // for (let i=0; i<iframeList.length; i++) {
        //     // 然后移除
        //     document.body.removeChild(iframeList[i]);
        // }
        // const iframeItem = document.getElementsByTagName('iframe');
        // for (let i=0; i<iframeItem.length; i++) {
        //     // 然后移除
        //     document.body.removeChild(iframeItem[i]);
        // }
    }
}

const mapState = (state) => ({
    scoreCellData: state.scoreParticulars? state.scoreParticulars.scoreCellData: [],
    scoreCellImg: state.scoreParticulars? state.scoreParticulars.scoreCellImg: [],
});

const mapDispatch = (dispatch) => ({
    accumulateHotOfScore(score_id) {
        dispatch(actionCreators.accumulateHotOfScore(score_id));
    },
	acquireScoreParticularsData(score_id) {
        const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w';
		const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk';
		dispatch(actionCreators.acquireScoreParticularsData(score_id, open_id, union_id));
    },
    enshrineScoreToLibrary(score_id) {
        const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w'
		const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk'
        dispatch(actionCreators.enshrineScoreToLibrary(score_id, open_id, union_id));
    },
    removalScoreFromLibrary(score_id) {
        const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w'
		const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk'
        dispatch(actionCreators.removalScoreFromLibrary(score_id, open_id, union_id));
    },
    downloadScoreFromLibrary(imgList, name) {
        // imgList.map(async (item, index) => {
        //     console.log(item)
            dispatch(actionCreators.downloadScoreFromLibrary(imgList, name));
        // })
    }
    
});

export default connect(mapState, mapDispatch)(withRouter(ScoreParticulars));